// Modal 模态框

.modal {
    .modal-content {
        @include e-rounded {
            border-radius: $e-border-radius;
        }

        .modal-header {
            .modal-title {
                font-weight: 500;
                font-size: 1.3rem;
                color: e-base-color(label, 4);

                small {
                    font-weight: 400;
                    font-size: .9rem;
                    color: e-base-color(label, 2);
                }
            }

            .close {
                outline: none !important;
                color: e-base-color(label, 2);

                @include e-close-icon();
                @include e-hover-transition();

                &:before {
                    font-size: 1.3rem;
                }

                span {
                    display: none;
                }

                &:hover {
                    color: e-brand-color();
                }
            }
        }
    }

    // 固定在右下角
    &.modal-sticky-bottom-right {
        padding: 0 !important;
        max-width: 500px;
        height: auto;
        position: fixed;
        left: auto;
        top: auto;
        bottom: 25px;
        right: 25px;
        margin: 0;
        box-shadow: 0 0 60px -15px rgba(0, 0, 0, .2);

        @include e-rounded {
            border-radius: $e-border-radius;
        }

        @include e-tablet-and-mobile {
            bottom: 10px;
            right: 10px;
        }

        @include e-mobile {
            max-width: 90%;
        }

        .modal-dialog {
            position: static;
            max-width: 500px;
            width: auto;
            margin: 0;

            @include e-rounded {
                border-radius: $e-border-radius;
            }

            .modal-content {
                border: 0;
                @include e-rounded {
                    border-radius: $e-border-radius;
                }
            }
        }
    }

    // 侧边 左&右
    &.fade .modal-dialog.modal-sidebar {
        -webkit-transform: translate(-25%, 0);
        transform: translate(-25%, 0)
    }

    &.fade .modal-dialog.modal-sidebar--right {
        -webkit-transform: translate(25%, 0);
        transform: translate(25%, 0)
    }

    &.show .modal-dialog.modal-sidebar {
        -webkit-transform: translate(0, 0);
        transform: translate(0, 0)
    }

    .modal-sidebar {
        position: absolute;
        left: 0;
        margin: 0;
        height: 100%;
        border-radius: 0;
        box-shadow: 1px 1px 50px 0 rgba(82, 63, 105, .15);

        &.modal-sm {
            width: 300px;
        }

        .modal-content {
            height: 100%;
            border: 0;
            border-radius: 0;

            .modal-header, .modal-footer{
                border-radius: 0;
            }
        }

        &.modal-sidebar--right {
            left: auto;
            right: 0;
        }
    }

}

.modal-open {
    overflow: auto !important;
    padding: 0 !important;
}

.modal-body {
    &.modal-body-fit {
        padding: 0;
    }

    &.modal-body-x-fit {
        padding-left: 0;
        padding-right: 0;
    }

    &.modal-body-y-fit {
        padding-top: 0;
        padding-bottom: 0;
    }
}

@include e-media-above(xl) {
    .modal-dialog.modal-xl {
        max-width: e-media-breakpoint(xl) - 100px;
    }
}